<div id="scorePop" class="score-pop showScore"><p>已获得 <span id="score-pop-score">100</span> 积分，当前积分 <span id="score-pop-total">22</span></p></div>


<style type="text/css">
 
.pop,.score-pop {
    z-index: 99;
    visibility: hidden
}

.score-pop {
    width: 426px;
    height: 140px;
    position: fixed;
    left: 50%;
    top: 50%;
    margin-left: -213px;
    margin-top: -100px;
    background-color: #fff;
    -webkit-box-shadow: 0 10px 50px rgba(0,0,0,.4);
    box-shadow: 0 10px 50px rgba(0,0,0,.4);
    font-size: 20px
}
.score-pop p {
    line-height: 140px;
}
body, div, h1, h2, h3, h4, html, li, ol, p, ul {
    margin: 0;
    padding: 0;
    border: 0;
    cursor: default;
}
.score-pop span {
    color: orange;
    font-weight: 700
}

.showScore {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
    -webkit-animation-name: showScore;
    animation-name: showScore
}

.showLotteryPop {
    -webkit-animation: showLotteryPop .2s ease;
    animation: showLotteryPop .2s ease
}

.showDetailPop {
    -webkit-animation: showDetailPop .2s ease;
    animation: showDetailPop .2s ease
}
.score-pop,.tasks li a {
    text-align: center
}
/**
	动画
*/

@-webkit-keyframes showScore {
    0% {
        margin-top: -40px;
        opacity: 0;
        visibility: visible
    }

    30%,70% {
        margin-top: -70px;
        opacity: 1;
        visibility: visible
    }

    100% {
        margin-top: -100px;
        opacity: 0;
        visibility: hidden
    }
}

@keyframes showScore {
    0% {
        margin-top: -40px;
        opacity: 0;
        visibility: visible
    }

    30%,70% {
        margin-top: -70px;
        opacity: 1;
        visibility: visible
    }

    100% {
        margin-top: -100px;
        opacity: 0;
        visibility: hidden
    }
}

@-webkit-keyframes showLotteryPop {
    from {
        width: 500px;
        height: 400px;
        margin-left: -250px;
        margin-top: -200px;
        opacity: 0;
        visibility: visible
    }

    to {
        width: 930px;
        height: 700px;
        margin-left: -465px;
        margin-top: -350px;
        opacity: 1;
        visibility: visible
    }
}

@keyframes showLotteryPop {
    from {
        width: 500px;
        height: 400px;
        margin-left: -250px;
        margin-top: -200px;
        opacity: 0;
        visibility: visible
    }

    to {
        width: 930px;
        height: 700px;
        margin-left: -465px;
        margin-top: -350px;
        opacity: 1;
        visibility: visible
    }
}

@-webkit-keyframes showDetailPop {
    from {
        width: 422px;
        height: 200px;
        margin-left: -211px;
        opacity: 0;
        visibility: visible
    }

    to {
        width: 622px;
        height: auto;
        margin-left: -311px;
        opacity: 1;
        visibility: visible
    }
}

@keyframes showDetailPop {
    from {
        width: 422px;
        height: 200px;
        margin-left: -211px;
        opacity: 0;
        visibility: visible
    }

    to {
        width: 622px;
        height: auto;
        margin-left: -311px;
        opacity: 1;
        visibility: visible
    }
}


</style>